import { Form } from '@ant-design/compatible';
import AuthComponent from '@/components/Authorized/AuthComponent';
import '@ant-design/compatible/assets/index.css';
import { Button,  message, Modal, Table, Row,Card } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import ProTable from '@ant-design/pro-table';
import UpdateForm from './components/UpdateForm';
import { manySeatsConfig, updateConfig } from './service.js';
import { ConsoleSqlOutlined } from '@ant-design/icons';
const { confirm } =Modal

const Tables = () => {
  const [updateModalVisible, handleUpdateModalVisible] = useState(false); //  编辑
  const [updateData, saveUpdateData] = useState({}) // 编辑数据
  const [selectedRowKeys, handleSelectedRowKeys] = useState('') // 勾选
  const [selectedRows, handleSelectedRows] = useState([]) // 勾选
  const [dataSource, handleDataSource] = useState([]) // 列表数据
  const [height, controlH] = useState(document.body.clientHeight - 400);
  const columns = [
    {
      title: '航线类型',
      dataIndex: 'segmentType',
    },
    {
      title: '价格（元/每座）',
      dataIndex: 'price'
    },
    {
      title: '编辑人',
      dataIndex: 'updateUser',
    },
    {
      title: '最后编辑时间',
      dataIndex: 'updateTime',
      valueType: 'dateTime',
    },
  ];
  // 获取列表
  const getList = ()=> {
    manySeatsConfig({}).then(res=> {
      res && res.map(item => {
        if (!item.updateTime) {
          item.updateTime = item.createTime
          item.updateUser = item.price
          return item
        }
      })
      handleDataSource(res)
    })
  }
  // 添加更新
  const handleSubmit = async (fields, text) => {
    const hide = message.loading(`正在${text}`);
    try {
     const res= await updateConfig({
       ...fields
      });
      if (res.code==='1') {
        hide()
        message.error(res.msg);
      } else {
      hide()
      message.success(`${text}成功`)
      return true;
      }
    } catch (error) {
      hide();
      message.error(`${text}失败请重试！`);
    }
  };
  useEffect(()=>{
    getList()
  },[])

  const tableSelectChange = (selectedRowKeys, selectedRows) =>{
    handleSelectedRowKeys(selectedRowKeys)
    handleSelectedRows(selectedRows)
  }

  const rowSelection = {
    selectedRowKeys,
    onChange: tableSelectChange,
  };

  return (
    <Card style={{padding:20}}>
      <Row style={{ marginBottom: 10, display: 'flex', justifyContent: 'flex-end'}}>
        <AuthComponent authCode="mkt.morethanperson.save">
        <Button style={{marginRight:20}}  icon='edit' onClick={() => {
          if (selectedRows.length === 0) {
            message.error('请选择编辑的条目')
          } else if (selectedRows.length > 1) {
            message.error('只能选择一条进行编辑')
          } else {
            handleUpdateModalVisible(true)
            saveUpdateData(selectedRows[0])
          }
        }}>编辑</Button>
        </AuthComponent>
      </Row>
      <Table
        scroll={{y:height}}
        rowKey='id'
        rowSelection={rowSelection}
        columns={columns}
        dataSource={dataSource}

      />
      {/* 编辑 */}
      <UpdateForm
        onSubmit={async value => {
          const success = await handleSubmit(value, '编辑');
          if (success) {
            handleUpdateModalVisible(false);
            getList()
            handleSelectedRowKeys('')
            handleSelectedRows([])
          }
        }}
        onCancel={() => handleUpdateModalVisible(false)}
        updateModalVisible={updateModalVisible}
        updateData={updateData}
      />
    </Card>
  );
};

export default Form.create()(Tables);
